<template>
  <div class="order-edit">
    <Pane>
      <span slot="title">
        订单编辑
        <el-button type="primary" size="small" style="float:right" @click="orderUpdate">保存</el-button>
      </span>
      <section slot="content" style="width:960px">
        <el-form :model="orderDetailForm">
          <el-row>
            <el-col :span="6">
              <el-form-item label="订单号" :label-width="formLabelWidth">
                <el-input v-model="orderDetailForm.orderNo" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="下单时间" :label-width="formLabelWidth">
                <el-input v-model="orderDetailForm.orderTime" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="手机号" :label-width="formLabelWidth">
                <el-input v-model="orderDetailForm.phone" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="收货人" :label-width="formLabelWidth">
                <el-input v-model="orderDetailForm.consignee" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="配送地址" :label-width="formLabelWidth">
                <el-input v-model="orderDetailForm.deliverAddress" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="送达时间" :label-width="formLabelWidth">
                <el-input v-model="orderDetailForm.deliveryTime" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="订单金额" :label-width="formLabelWidth">
                <el-input v-model="orderDetailForm.orderAmount" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="订单状态" :label-width="formLabelWidth">
                <el-input v-model="orderDetailForm.orderState" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="用户备注" :label-width="formLabelWidth">
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 2, maxRows: 4}"
                  placeholder="请输入内容"
                  v-model="orderDetailForm.remarks"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </section>
    </Pane>
  </div>
</template>

<script>
import Pane from '@/components/Pane/Pane.vue'

import { getOrderDetail, editOrder } from '@/api/order.js'
export default {
  name: 'OrderEdit',
  props: {},
  data() {
    return {
      orderDetailForm: {},
      formLabelWidth: '100px'
    }
  },
  created() {
    this.init()
  },
  methods: {
    async init() {
      const id = this.$route.query.id
      const { data } = await getOrderDetail({ id })
      this.orderDetailForm = data
      console.log(data)
    },
    async orderUpdate() {
      // const { code, msg } = await editOrder(this.orderDetailForm)
      await editOrder(this.orderDetailForm)
      // console.log(code, msg)
    }
  },
  components: {
    Pane
  }
}
</script>

<style scoped >
.order-edit {
  max-width: 960px;
  max-height: 400px;
  background-color: #fff;
}
</style>
